<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar fixed>
      <template #left>
        <!-- .代表文件所在文件夹(Home文件夹) -->
        <!-- ..上一级(views文件夹) -->
        <!-- ../.. 上一级的上一级(src文件夹) -->
        <!-- <img class="logo" src="../../assets/logo.png" alt=""> -->
        <img class="logo" :src="imgObj" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="white" @click="searchFn"/>
      </template>
    </van-nav-bar>

    <!-- 导航栏 -->
    <div class="main">
      <!-- 频道导航 -->
      <van-tabs
        v-model="active"
        animated
        sticky
        offset-top="1.226667rem"
        @click="getidFn"
      >
        <!-- 每次循环都是独立执行, 所以运行后, 这段代码会产生多个 -->
        <van-tab
          v-for="item in channelList"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        >
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              offset="50"
              :immediate-check="false"
              @load="onLoad"
            >
              <!-- list列表 -->
              <ArticleList :arr="articleList" @del="remove"></ArticleList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 右侧的编辑频道的小图标 -->
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="show = true"
    />
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" class="edit_wrap"  @close='$refs.edit.show=false'
      ><ChannelEdit
        :myList="channelList"
        :allList="allChannelList"
        @closePop="show = false"
        @changeChannelId='changeFn'
        ref="edit"
      ></ChannelEdit
    ></van-popup>
  </div>
</template>

<script>
// 问题1: @路径问题
// @ 只是JS中使用的别名 (webpack设置的别名, @代表的src绝对地址)
// html和css里都直接写相对路径即可
// 问题2: html里size大小适配
// postcss只负责css代码, 转换不了html里的size属性值
// 自己写rem
// 问题3: 在JS中引入图片对象
// webpack会把一切都认为是模块(包括图片文件/字体文件/...)
import {
  channelAPI,
  ArticleListAPI,
  disLikeAPI,
  reportAPI,
  allChannelListAPI
} from '@/api' // 引入接口方法
import imgObj from '@/assets/logo.png' // 引入tabbarlogo
import ArticleList from './components/ArticleList' // 引入文章列表组件
import ChannelEdit from './components/ChannelEdit' // 引入频道管理组件
import dayjs from 'dayjs' // 引入dayjs插件
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      imgObj: imgObj, // logo图片
      active: 0, // 默认选中频道
      channelList: [], // 频道数组
      articleList: [], // 文章列表
      channelId: 0, // 默认频道id
      loading: false, // 滚动到底部
      finished: false, // 滚动加载完成
      nextTime: null, // 下一次加载的时间参数
      isLoading: false, // 下拉刷新的状态
      show: false, // 弹出层的状态
      allChannelList: [] // 所有频道
    }
  },
  async created () {
    // 调用获取所有频道方法
    const res2 = await allChannelListAPI()
    this.allChannelList = res2.data.data.channels
    console.log(res2)
    // 调用频道方法
    const res = await channelAPI()
    this.channelList = res.data.data.channels
    // console.log(this.channelList)
    this.getarticleList() // 网页打开提前先请求一次
  },
  methods: {
    // 得到文章数据列表
    async getarticleList () {
      // 调用文章列表方法
      const res2 = await ArticleListAPI({
        channelId: this.channelId,
        timestamp: this.nextTime
      })

      if (res2.data.data.results.length === 0) {
        // 把list组件的finished的状态改为true,显示加载完成
        this.finished = true
        return
      }
      // 对数据进行预处理 把通过dayjs处理后的事件赋值给数据库里的pubdate
      res2.data.data.results.forEach((item) => {
        item.pubdate = this.getItme(item.pubdate)
      })
      console.log(res2)

      // 把后台数据里的pre_timestamp的值赋给nextTime进行保存
      this.nextTime = res2.data.data.pre_timestamp
      // 获取到数据赋值给准备好的文章列表
      this.articleList = [...this.articleList, ...res2.data.data.results]
      // 上啦数据加载完毕返回原来的状态
      this.loading = false
      // 下拉刷新完毕后返回原来的状态
      this.isLoading = false
    },
    // 点击频道切换的函数
    getidFn (channelId) {
      this.nextTime = null // 时间参数置空
      this.articleList = [] // 文章列表置空
      this.channelId = channelId // 把通过vant组件拿到的id赋值给channelId
      this.getarticleList() // 点击后拿到新的id,再请求一次
    },
    // 时间函数
    getItme (time) {
      dayjs.extend(relativeTime)
      dayjs.locale('zh-cn')
      const a = dayjs()
      const b = dayjs(time)
      return a.to(b)
    },
    // 上拉加载页面
    onLoad () {
      // 刚进入页面没有数据
      // if (this.articleList.length === 0) {
      //   this.loading = false // 进入页面没有数据时,把loading的值改为false,不让lisit组件执行
      //   return
      // }
      // 触发 load 事件后list组件将 loading 设置成 true 发起异步操作调用获取文章列表方法并更新数据
      this.getarticleList()
    },
    // 下拉刷新页面
    onRefresh () {
      this.nextTime = null // 时间参数置空
      this.articleList = [] // 文章列表置空
      this.getarticleList() // 重新发起请求
    },
    // 删除当前单元格
    async remove (item, action) {
      // 使用findIndex方法找到文章列表里的索引与传过来的item得索引对应的索引
      const index = this.articleList.findIndex((val) => {
        return val.art_id === item.art_id
      })
      // 使用splice方法删除当前单元格
      this.articleList.splice(index, 1)
      // 判断点击的name值
      if (action.name === '不感兴趣') {
        // 调用不敢兴趣方法
        const res = await disLikeAPI({
          artId: item.art_id
        })
        console.log(res)
      } else {
        // 调用举报方法
        const res = await reportAPI({
          artId: item.art_id,
          type: action.value
        })
        console.log(res)
      }
    },
    // 跳转频道
    changeFn (id) {
      // 将传过来的id值赋给active
      this.active = id
      // 调用一次频道切换的函数
      this.getidFn(id)
    },
    // 跳转搜索页面
    searchFn () {
      this.$router.push({
        path: '/serach'
      })
    }
  }
}
</script>

<style scoped lang="less">
//logo大小
.logo {
  width: 100px;
  height: 30px;
}
// 内容区域
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
